<template>
  <div class="LightElectricitybox">
    <div class="topbox">
      <el-form ref="form" label-position="left" label-width="80px">
          <el-row :gutter="20">
              <el-col :span="5">
                <el-form-item label="光伏系统">
                  <FilterSelect2
                      v-model="companyId"
                      :optionlist="xitonglist"
                      @updateModelValue="changexitong"
                      :valuekey="{ name: 'name', value: 'id' }"
                    ></FilterSelect2>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item label="年份">
                  <el-date-picker style="width: 100%;" v-model="value3" type="year" value-format="yyyy" placeholder="选择年" size="small"></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="14" style="text-align: right;">
                <el-form-item label="">
                  <el-button size="small" @click="chongzhi">重 置</el-button>
                  <el-button size="small" type="primary" @click="gettablelist">查 询</el-button>
                </el-form-item>
              </el-col>
          </el-row>
      </el-form>
    </div>
    <div class="bodybox">
      <div class="title">
        <div>光伏系统电价方案</div>
        <div class="newadd"><el-button size="small" type="primary" @click="newadd">新 增</el-button> <TopTooltip  @command="command"  @shuaxin="shuaxin"></TopTooltip></div>
      </div>
      <div class="tablebox">
        <TableColumn
         ref="tabledata"
         :tableData="tableData" 
         :tableConfig="tableConfigs" 
         :issize="issize">
         <el-table-column
            label="操作"
            align="center"
            fixed="right"
            width="100">
            <template #default="{row}">
              <!-- <el-tooltip class="item" effect="dark" content="浏览" placement="top">
                
              </el-tooltip> -->
              <el-tooltip class="item" effect="dark" content="编辑" placement="top">
                <i @click="modify(row)" class="el-icon-edit" style="color:#1a90fe ;margin-right: 20px; cursor: pointer;"></i>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="删除" placement="top">
                <i @click="delet(row)" class="el-icon-delete" style="color: red;cursor: pointer;"></i>
              </el-tooltip>
            </template>
         </el-table-column>
        </TableColumn>
      </div>
      <!-- 底部分页 -->
       <div class="fenye">
          <el-pagination
                background
                layout="prev, pager, next"
                :current-page.sync="pageobj.pageNo"
                :page-size="20"
                @current-change="gettablelist"
                :total="+totalCount">
          </el-pagination>
        </div>
        <!-- 弹窗 -->
        <AddDialog ref="AddDialog" :xitonglist="xitonglist" :companyId="companyId" @shuaxin="gettablelist"></AddDialog>
    </div>
  </div>
</template>

<script>
import AddDialog from './AddDialog.vue'
import {getphotovollistapi} from '@/api/Photovoltaic/analysis/YoyAnalysis'
import TopTooltip from '@/components/TopTooltip/index.vue'
import TableColumn from '@/components/Table/index.vue'
import { exportexcel } from '@/utils/excel'
import {getdianjiafanganlistapi,getdianjiaxialalistapi,postadddianjiaapi,putupdatedianjiaapi,postdeldianjiaapi} from '@/api/Photovoltaic/settlement/LightElectricity'
export default {
  name: 'CallPoliceIndex',
  components: {
    AddDialog,
    TopTooltip,
    TableColumn
  },
  data() {
    return {
      companyId:'',
      value3: '',
      issize: 'medium',
      xitonglist:[],
      tableData: [],
      tableConfigs:[
        { label: '序号', type: 'index', center: 'center', width: '70' },
        { label: '光伏电站', prop: 'className' },
        { label: '年份', prop: 'year', center: 'center' },
        { label: '国网市电价格方案', prop: 'cityElecTemplateName',  },
        { label: '光伏售电价格方案', prop: 'sellElecTemplateName',  },
        { label: '上网电价方案', prop: 'netElecTemplateName', },
      ],
      totalCount: '',
      pageobj: {
        pageNo: 1,
        pageSize:20,
      },
      fanganlist: [],
      subBuro:''
    };
  },

  async mounted() {
    const { data: { list } } = await getphotovollistapi()
    this.xitonglist = list
    const PhotoCompanyId = localStorage.getItem('PhotoCompanyId')
    this.$set(this,'companyId',PhotoCompanyId?+PhotoCompanyId:list[0].id)
    this.$set(this,'subBuro',PhotoCompanyId?+PhotoCompanyId:list[0].subBuro)
    // this.gettime()
    this.gettablelist()
  },

  methods: {

    // 获取表格数据
    async gettablelist() {
      this.$refs.tabledata.loading=true
      const { data: { list,totalCount } } = await getdianjiafanganlistapi({
        year:this.value3,classId:this.companyId, pageNo: this.pageobj.pageNo - 1,
        pageSize: this.pageobj.pageSize,
      })
      this.totalCount=totalCount
      this.tableData=list
      this.$refs.tabledata.loading=false
    },
    // 编辑
    modify(row) {
      this.$refs.AddDialog.bianji(row)
    },
    // 删除
    delet(row) {
      this.$confirm('此操作将永久删除该方案, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await postdeldianjiaapi({id:row.id}).then(res => {
            this.$message({
              type: res.code == '200' ? 'success' : 'warning',
              message:res.code=='200'?'删除成功':res.message
            })
          })
          this.gettablelist()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },

    // 新增
    newadd() {
      this.$refs.AddDialog.dialogVisible = true
      this.$refs.AddDialog.dialogchange(this.companyId)
    },

    // 系统下拉存本地
    changexitong(val) {
      localStorage.setItem('PhotoCompanyId', val)

    },
    chongzhi() {
      this.value3=''
      this.gettablelist()
    },
         // 调节表格密度
  command(val) {
      if (val === '默认') {
        this.issize = 'medium'
      } else if (val === '中等') {
        this.issize = 'small'
      } else {
        this.issize = 'mini'
      }
    },
    // 刷新列表
    shuaxin() {
      this.gettablelist()
      this.$message.success('列表刷新成功')
    },
    // 获取当前时间戳
    gettime() {
      const date = new Date()
      const year = date.getFullYear() // 年
      this.$set(this,'value3',year.toString())
    },
  },
};
</script>

<style lang="scss" scoped>
.LightElectricitybox{
  height: 100%;
  padding: 10px;
  .topbox{
    height: 80px;
    padding: 20px;
    background-color: #fff;
    margin-bottom: 10px;
  }
  .bodybox{
    height: calc(100% - 90px);
    background-color: #fff;
    padding: 20px;
    .title{
      margin-bottom: 10px;
      display:flex;
      justify-content:space-between;
      .newadd{
        display: flex;
      }
    }
    .tablebox{
      height: 90%;
    }
    .fenye{
      margin-top: 10px;
      text-align: right;
    }
  }
}
::v-deep .el-dialog__footer{
  text-align: center;
}
</style>